<template>
  <t-dialog v-model:visible="formVisible" :header="formData.id ? '修改权限' : '新增权限'" :width="680" :footer="false"
    :on-closed="closed">
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" :reset-type="resetType" :label-width="100" @submit="onSubmit">
        <t-form-item label="角色" name="admin_role_id">
          <t-select v-model="formData.admin_role_id" class="demo-select-base" clearable filterable
            :style="{ width: '480px' }">
            <t-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="控制器" name="controller">
          <t-input v-model="formData.controller" :style="{ width: '480px' }" placeholder="请输入控制器" />
        </t-form-item>
        <t-form-item label="操作" name="action">
          <t-input v-model="formData.action" :style="{ width: '480px' }" placeholder="请输入操作" />
        </t-form-item>
        <t-form-item style="float: right">
          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
          <t-button theme="primary" type="submit">确定</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
  <t-loading :loading="loading" text="加载中..." fullscreen />
</template>

<script setup lang="ts">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import type { PropType } from 'vue';
import { ref, watch } from 'vue';
import { savePermission } from '@/api/admin/permission';

const form = ref(null);

// 父给子传值
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
  roleArr: Object as any,
  roleId: {
    type: Number,
    default: 0,
  },
});

// 加载
const loading = ref(false);

export interface FormData {
  id: number;
  admin_role_id: number;
  controller: string;
  action: string;
}
// 初始化数据
const INITIAL_DATA: FormData = {
  id: 0,
  admin_role_id: null,
  controller: '',
  action: '',
};
const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const resetType = 'initial';

// 表单规则
const rules: FormRules<FormData> = {
  admin_role_id: [{ required: true, message: '角色不能为空', type: 'error' }],
  controller: [{ required: true, message: '控制器不能为空', type: 'error' }],
  action: [{ required: true, message: '操作不能为空', type: 'error' }],
};

// 取消按钮
const onClickCloseBtn = () => {
  formVisible.value = false;
};
// 关闭dialog是reset from
const closed = () => {
  form.value.reset();
  formData.value.id = 0;
  formData.value.admin_role_id = props.roleId;
};

// 提交按钮
const onSubmit = async ({ firstError }: SubmitContext<FormData>) => {
  if (!firstError) {
    try {
      loading.value = true;
      await savePermission(formData.value);
      emit("refreshData");
    } catch (e) {
      if (e.response && e.response.data.code === 995) {
        MessagePlugin.error(e.response.data.message);
      } else {
        MessagePlugin.error('系统错误');
      }
    } finally {
      loading.value = false;
      formVisible.value = false;
    }
  } else {
    // console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

const options = props.roleArr;

// 监视
const emit = defineEmits(['update:visible', 'refreshData']);
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);
watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);
watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);
watch(
  () => props.roleId,
  (val) => {
    formData.value.admin_role_id = val;
  },
);
</script>
